<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #canvas{
        border: 1px solid #000;
        background: #f7f7f7;
    }
</style>
</head>
<body>
    <canvas id='canvas' width="400" height="400">你的浏览器不支持canvas,请升级你的浏览器</canvas>
</body>
<script>
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.onload = function(){
        ctx.drawImage(img,0,0,400,400);
    }
    img.src = './bgimg.jpg';

    ctx.arc(80,200,60,0,Math.PI*2,true);
    ctx.clip();

</script>
</html>